<div class="form-inline">
  <div class="form-inline pull-left">
    <button type="button" class="btn" [ngClass]="{'btn-success': status == '','btn-default': status != ''}"
            (click)="status='';getInvitationList(1);">全部
    </button>
    <button type="button" class="btn" [ngClass]="{'btn-success': status == '0','btn-default': status != '0'}"
            (click)="status='0';getInvitationList(1);">未使用
    </button>
    <button type="button" class="btn" [ngClass]="{'btn-success': status == '1','btn-default': status != '1'}"
            (click)="status='1';getInvitationList(1);">已使用
    </button>
  </div>
  <div class="pull-right">
    <input type="text" style="width:300px;" class="form-control" [(ngModel)]="searchData" name="searchData"
           placeholder="请输入邀请码或者openId" (keydown)="keyDown($event)">
    <button class="btn btn-success" (click)="search()">搜索</button>
    <button class="btn btn-default" (click)="reset()">重置</button>
    <button type="button" class="btn btn-success" (click)="showAddModal()" *ngIf="canVisit">新建邀请码</button>
  </div>
</div>
<div class="table-responsive">
  <nz-spin [nzTip]="'正在读取邀请码...'" [nzSpinning]="_isSpinning" [nzSize]="'large'" class="admin-spin">
    <table class="table">
      <thead>
      <tr>
        <th style="width:300px;">id</th>
        <th style="width:200px;">邀请码</th>
        <th style="width:200px;">openId</th>
        <th style="width:400px;">用户名</th>
        <th style="width:300px;">是否使用</th>
        <th style="width:400px;">生成时间</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of invitationList">
        <td>{{item.id}}</td>
        <td>{{item.code}}</td>
        <ng-container *ngIf="item.member">
          <td>{{item.member.openId}}</td>
          <td>{{ item.member.nickName }}</td>
        </ng-container>
        <ng-container *ngIf="!item.member">
          <td></td>
          <td></td>
        </ng-container>
        <td>
          <span class="status-radio"
                [ngClass]="{ 'noauth-radio': item.status == 0 , 'success-radio': item.status != 0  }"></span>
          {{item.status == 0 ? '未使用': '已使用'}}
        </td>
        <td>{{item.created_at}}</td>
      </tr>
      </tbody>
    </table>
  </nz-spin>
  <div class="text-center">
    <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [(ngModel)]="currentPage"
                [itemsPerPage]="itemsPerPage"
                [maxSize]="10"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                [boundaryLinks]="true" class="pagination-sm"></pagination>
  </div>
</div>

<!-- 重置密码 -->
<!--<div bsModal #resetPsdModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"-->
<!--aria-hidden="true" [config]="{backdrop: 'static'}">-->
<!--<div class="modal-dialog">-->
<!--<div class="modal-content">-->
<!--<div class="modal-header">-->
<!--<h4 class="modal-title pull-left">新建分组</h4>-->
<!--<button type="button" class="close pull-right" aria-label="Close" (click)="resetPsdModal.hide()">-->
<!--<span aria-hidden="true">&times;</span>-->
<!--</button>-->
<!--</div>-->
<!--<div class="modal-body">-->
<!--<form #resetPsdForm="ngForm">-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-3"><span class="c-red">*</span>密码</label>-->
<!--<div class="col-md-7">-->
<!--<input type="password" class="form-control" name="password" #password="ngModel" [(ngModel)]="resetPsd" required>-->
<!--<p [hidden]="password.pristine || password.valid" class="alert alert-danger">请输入密码!</p>-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-3"><span class="c-red">*</span>确认密码</label>-->
<!--<div class="col-md-7">-->
<!--<input type="password" class="form-control" name="psdAgain" #psdAgain="ngModel" [(ngModel)]="resetPsdAgain" required>-->
<!--<p [hidden]="psdAgain.pristine || psdAgain.valid" class="alert alert-danger">请输入密码!</p>-->
<!--</div>-->
<!--</div>-->
<!--</form>-->
<!--</div>-->
<!--<div class="model-footer text-center">-->
<!--<button type="submit" class="btn btn-default" (click)="resetPsdModal.hide()">取 消</button>-->
<!--<button type="button" class="btn btn-success" [disabled]="!resetPsdForm.form.valid" (click)="resetPsdSubmit()">确 定</button>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->

<app-notification [type]="type" [message]="message" [isShow]="isShow"
                  (promptIsShow)="isShow = $event;"></app-notification>

<div class="modal fade" bsModal #addModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-xs">
    <form #addForm="ngForm">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title pull-left">新建邀请码</h4>
          <button type="button" class="close pull-right" aria-label="Close"
                  (click)="addModal.hide();">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group clearfix">
            <label class="col-md-2">邀请码数量:</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="number" [(ngModel)]="addInvitation.number" required
                     (ngModelChange)="checkStatus($event)">
            </div>
          </div>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button"
                    (click)="cancel()">取 消
            </button>
            <button class="btn btn-success btn-md-long" type="button"
                    [disabled]="!addForm.form.valid || !error"
                    (click)="add();">添 加
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

